import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { MotionComponent } from './motion/motion.component';

export const BadgeConfig = {
  location: 'Badge',
  description: '用于提示对象的消息数量（一般出现在对象的右上角）或单独使用表示某种状态。',
  description_en:
    'Used to prompt the number of messages of the objects (generally displayed on the upper-right corner of the objects) or indicate a state singly.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/badge/demo1/demo1.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription:
        '基础的使用，一般徽章显示在对象的右上角；当 lvValue 为 0 时，默认不显示，可通过 lvBadgeShowZero 设置为显示；超过 lvMaxValue 会显示为 number+，默认的 lvMaxValue 为 999。',
      demoDescription_en:
        'Basic use. Badge is generally displayed on the upper-right corner of the objects. When lvValue equals to 0, it will not be displayed by default, while it can be set to displayed. If lvValue exceeds the lvMaxValue, it will be displayed as number+. The default lvMaxValue is 999.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/badge/demo2/demo2.component',
      demoTitle: '小红点',
      demoTitle_en: 'Little Red Dot',
      demoDescription: '屏蔽数字的显示，只显示一个小红点。徽标也可以外部控制是否展示。',
      demoDescription_en:
        'Used to shield the display of the number, and only a small red dot will be displayed. Badge can also be displayed through external controls.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/badge/demo3/demo3.component',
      demoTitle: '独立使用',
      demoTitle_en: 'Independent Use',
      demoDescription: '独立使用徽标，可通过 lvAsStatus 属性设置显示为状态。',
      demoDescription_en: 'Badge is used independently, and it can be displayed as status through attribute lvAsStatus.',
    },
    {
      demo: MotionComponent,
      codePath: 'showcase/badge/motion/motion.component',
      demoTitle: '动态效果',
      demoTitle_en: 'Dynamic Effect',
      demoDescription: '徽标数值动态变化的效果。',
      demoDescription_en: 'Effect of the dynamic change of badge.',
    },
  ],
  selector: 'lv-badge',
  snippet: `<span lv-badge="\${1:20}"></span>`,
  mApi: [
    {
      name: '组件方式',
      name_en: 'Component Mode',
      api: [
        {
          attribute: 'lvValue',
          type: 'number',
          default: '0',
          description: '显示的数值。',
          description_en: 'Displayed value.',
        },
        {
          attribute: 'lvMaxValue',
          type: 'number',
          default: '999',
          description: `显示的最大数值，大于 lvMaxValue 则显示为 number+ 。`,
          description_en: `Maximum value displayed: it will be displayed as number+ if the value exceeds lvMaxValue.`,
        },
        {
          attribute: 'lvVisible',
          type: 'boolean',
          default: 'true',
          description: '可见性设置。',
          description_en: 'Visibility settings.',
        },
        {
          attribute: 'lvDot',
          type: 'boolean',
          default: 'false',
          description: `是否只展示小圆点，不显示数字。`,
          description_en: `Whether to display small dot only while number not to be displayed.`,
        },
        {
          attribute: 'lvShowZero',
          type: 'boolean',
          default: 'false',
          description: '数字为 0 时是否展示徽标。',
          description_en: 'Whether to display the badge while number equals to 0.',
        },
        {
          attribute: 'lvAsStatus',
          type: 'string',
          default: 'null',
          description: `徽标作为状态展示，可选值为 ('success' | 'processing' | 'default' | 'error' | 'warning')。`,
          description_en: `Badge is displayed as status. Optional status : 'success', 'processing', 'default', 'error', 'warning'.`,
        },
        {
          attribute: 'lvLabel',
          type: 'string | TemplateRef',
          default: 'null',
          description: `徽标作为状态时，可配置文本内容，类型为字符串或模板。`,
          description_en: 'When badge is set as status, text content can be configured. The type is string or template.',
        },
        {
          attribute: 'lvTextColor',
          type: 'string',
          default: 'null',
          description: `自定义徽标的文字颜色。注：徽标作为状态时，该属性无效。`,
          description_en: 'Text colour of the customised badge. Note: when badge is set as status, this attribute is invalid.',
        },
        {
          attribute: 'lvBackgroundColor',
          type: 'string',
          default: 'null',
          description: `自定义徽标的背景颜色。注：徽标作为状态时，该属性无效。`,
          description_en: 'Background colour of the customised badge. Note: when badge is set as status, this attribute is invalid.',
        },
      ],
      event: [],
    },
    {
      name: '指令方式',
      name_en: 'Instruction Mode',
      api: [
        {
          attribute: 'lv-badge',
          type: 'number',
          default: '0',
          description: 'lv-badge 作为徽标的指令，同时作为数值的输入属性。',
          description_en: 'lv-badge is set as the instruction of the badge and as the input attribute of the value meanwhile.',
        },
        {
          attribute: 'lvBadgeMaxValue',
          type: 'number',
          default: '999',
          description: `显示的最大数值，大于 lvBadgeMaxValue 则显示为 number+ 。`,
          description_en: 'Maximum value displayed: it will be displayed as number+ if the value exceeds lvMaxValue.',
        },
        {
          attribute: 'lvBadgeVisible',
          type: 'boolean',
          default: 'true',
          description: '可见性设置。',
          description_en: 'Visibility settings.',
        },
        {
          attribute: 'lvBadgeDot',
          type: 'boolean',
          default: 'false',
          description: `是否只展示小圆点，不显示数字。`,
          description_en: `Whether to display small dot only while number not to be displayed.`,
        },
        {
          attribute: 'lvBadgeShowZero',
          type: 'boolean',
          default: 'false',
          description: '数字为 0 时是否展示徽标。',
          description_en: 'Whether to display the badge while number equals to 0.',
        },
        {
          attribute: 'lvBadgeTextColor',
          type: 'string',
          default: 'null',
          description: `自定义徽标的文字颜色。`,
          description_en: 'Text colour of the customised badge.',
        },
        {
          attribute: 'lvBadgeBackgroundColor',
          type: 'string',
          default: 'null',
          description: `自定义徽标的背景颜色。`,
          description_en: 'Background colour of the customised badge.',
        },
      ],
      event: [],
    },
  ],
};
